<template>
  <div class="editor-box">
    <div class="editor-box-head">
      <template v-for="(item, index) in menus" :key="index">
        <component
          :editor="editor"
          :row="item"
          v-if="item.type"
          :is="item.type"
          @mousedown="handleMouseDown"
        ></component>
        <button
          v-else
          @mousedown.native="handleTool(item)"
          :class="item.selected ? 'selected' : ''"
        >
          <el-tooltip placement="top" :show-after="200">
            <template #content>{{ item.title }}</template>
            <font-awesome-icon style="outline: 0" :icon="['fa', item.icon]" />
          </el-tooltip>
        </button>
      </template>
    </div>
    <div class="editor-box-content">
      <editor-content
        spellcheck="false"
        class="editor-container"
        :editor="editor"
      ></editor-content>
    </div>
  </div>
</template>
<script lang="ts" >
import {
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  defineComponent,
  toRefs,
  watchEffect,
} from "vue";
import { EditorContent, useEditor } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";
import Color from "@tiptap/extension-color";
import TextStyle from "@tiptap/extension-text-style";
import { FontFamily } from "@tiptap/extension-font-family";
import { Placeholder } from "@tiptap/extension-placeholder";
import { Underline } from "@tiptap/extension-underline";
import { Highlight } from "@tiptap/extension-highlight";
import LineHeight from "tiptap-extension-line-height";
import { FontSize } from "tiptap-extension-font-size";
import { TextAlign } from "@tiptap/extension-text-align";
import { Link } from "@tiptap/extension-link";
import ImageLink from "tiptap-extension-image-link";
import Image from "tiptap-extension-image";
import backColor from "./src/backColor.vue";
import fontColor from "./src/fontColor.vue";
import fontSize from "./src/fontSize.vue";
import titles from "./src/titles.vue";
import imageButton from "./src/imageButton.vue";
import { ResizableMedia } from "./extentions/resizableMedia/resizableMedia";

export default defineComponent({
  props: {},
  components: {
    EditorContent,
    backColor,
    fontColor,
    fontSize,
    titles,
    imageButton,
  },
  setup(props, { emit }) {
    const state = reactive({
      result: "",
      clickFlag: false,
      menus: [
        // { title: "撤销", icon: "arrow-rotate-left", selected: false },
        // { title: "格式刷", icon: "paint-roller", selected: false },
        { title: "图片", icon: "image", type: "imageButton", selected: false },
        { title: "斜体", icon: "italic", selected: false },
        { title: "加粗", icon: "bold", selected: false },
        { title: "删除线", icon: "strikethrough", selected: false },
        { title: "下划线", icon: "underline", selected: false },
        { title: "超链接", icon: "link", selected: false },
        {
          title: "填充",
          icon: "fill-drip",
          selected: false,
          type: "backColor",
        },
        { title: "字体颜色", icon: "font", type: "fontColor", selected: false },
        { title: "字号", icon: "", type: "fontSize", selected: false },
        { title: "左对齐", icon: "align-left", selected: false },
        { title: "右对齐", icon: "align-right", selected: false },
        { title: "居中对齐", icon: "align-center", selected: false },
        { title: "两端对齐", icon: "align-justify", selected: false },
        // { title: "字体", icon: "", type: "fontFamily", selected: false },
      ],
    });

    const onUpdate = ({ editor }) => {};

    const handleBlur = () => {
      if (state.clickFlag) {
        state.clickFlag = false;
        return false;
      }
      emit("blur", editor.value.getHTML());
    };

    const editor = useEditor({
      content: "",
      extensions: [
        StarterKit,
        Highlight.configure({
          multicolor: true,
          HTMLAttributes: {
            class: "custom-class",
          },
        }),
        Link,
        ImageLink,
        Image,
        LineHeight,
        Underline,
        TextStyle,
        FontFamily,
        FontSize,
        4,
        Color.configure({
          types: ["textStyle"],
        }),
        Placeholder.configure({
          placeholder: '请在这里输入正文...',
        }),
        TextAlign.configure({
          types: ["heading", "paragraph"],
        }),
      ],
      autofocus: false,
      editable: true,
      onUpdate,
      onBlur: handleBlur,
    });

    const editFuncRef = ref({
      arrowrotateleft: () => {
        editor.value.can().chain().focus().undo().run();
      },
      underline: () => {
        editor.value.chain().focus().toggleUnderline().run();
      },
      alignright: () => {
        editor.value.commands.setTextAlign("right");
      },
      alignleft: () => {
        editor.value.commands.setTextAlign("left");
      },
      aligncenter: () => {
        editor.value.commands.setTextAlign("center");
      },
      alignjustify: () => {
        editor.value.commands.setTextAlign("justify");
      },

      paintroller: () => {},
      image: () => {},
      italic: () => {
        editor.value.commands.toggleItalic();
      },
      bold: () => {
        editor.value.chain().focus().toggleBold().run();
      },
      eraser: () => {},
      strikethrough: () => {
        editor.value.commands.toggleStrike();
      },
      link: () => {},
      filldrip: () => {},
      font: () => {},
    });

    const handleTool = (row) => {
      state.clickFlag = true;
      row.selected = !row.selected;
      const key = row.icon.replaceAll("-", "");
      editFuncRef.value[key]();
      editor.value.commands.focus(0);
    };

    const setContent = (val) => {
      editor.value.commands.setContent(val);
    };

    return {
      ...toRefs(state),
      handleTool,
      setContent,
      handleMouseDown: () => {
        state.clickFlag = true;
      },
      editor,
    };
  },
});
</script>
<style scoped lang="less">
.editor-box {
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;

  &-head {
    padding: 0px 24px;
    font-size: 20px !important;
    height: 50px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    color: var(--note-font-color);
    background: var(--note-bg-color1);
    border-bottom: solid 1px var(--note-line1);

    button {
      font-size: 20px !important;
      padding: 5px 8px;
      color: #666666;
      border: 0;
      margin-right: 10px;
      background: transparent;
      cursor: pointer;
    }
  }

  &-content {
    flex: 1;
    padding: 0px 15px;
    overflow: auto;
    background: var(--note-bg-color1);
  }
}

.selected {
  background: var(--note-bg-hover);
}
</style>
